<template>
  <div>
    <pageMain padding="0px" background="transparent">
      <chunkTitle title="服务设置">
        <template>
          <div class="form-box">
            <el-form
              ref="form"
              :model="form"
              :label-width="labelWidth"
              :label-position="labelPosition"
            >
              <el-form-item label="短信服务">
                <el-switch
                  v-model="form.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>

              <el-form-item label="短信日志">
                <el-switch
                  v-model="form.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>

              <el-form-item label="短信平台">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="剩余额度">
                <span>那就</span>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </chunkTitle>

      <chunkTitle title="服务测试">
        <template>
          <el-form :inline="true" :model="teskForm" class="demo-form-inline">
            <el-form-item label="手机号码">
              <el-input v-model="teskForm.user" placeholder="请输入手机号码"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">发送测试</el-button>
            </el-form-item>
          </el-form>
        </template>
      </chunkTitle>

      <chunkTitle title="短信日志">
        <template>
          <el-table :data="EmailLog" style="width: 100%">
            <el-table-column prop="date" label="id" width="60" fixed="left">
            </el-table-column>
            <el-table-column
              prop="date"
              label="短信类型"
              width="130"
              fixed="left"
            >
            </el-table-column>
            <el-table-column prop="date" label="发送方" width="180">
            </el-table-column>
            <el-table-column prop="date" label="收件方" width="180">
            </el-table-column>
            <el-table-column prop="name" label="短信内容"> </el-table-column>
            <el-table-column prop="address" label="发送时间"> </el-table-column>
            <el-table-column prop="name" label="状态" width="90" fixed="right">
            </el-table-column>
            <el-table-column prop="name" label="操作" width="180" fixed="right">
            </el-table-column>
          </el-table>
        </template>
      </chunkTitle>
    </pageMain>
  </div>
</template>

<script>
import "../css/system.css";
import chunkTitle from "@/components/chunk-title/chunk-title.vue";
import pageMain from "~/page-main/page-main.vue";
export default {
  components: { pageMain, chunkTitle },

  data() {
    return {
      labelWidth: "100px",
      labelPosition: "left",
      EmailLog: [],
      teskForm:{},
      form: {},
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
};
</script>

<style scoped>
.form-box {
  width: 300px;
}
</style>
